<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap 核心css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- swiper css -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 当前页面 -->
    <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
    <header id="header">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid warp">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!-- 如果当前是移动端时的导航按钮 -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand" href="#">Spirit8</a>
                </div>

                <!-- 导航条 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <!-- 右边内容 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#banner">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#team">TEAM</a></li>
                        <li><a href="#services">SERVICES</a></li>
                        <li><a href="#clients">CLIENTS</a></li>
                        <li><a href="#work">WORK</a></li>
                        <li><a href="#testimonials">TESTIMONIALS</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <div id="ding"><a href="#banner"><img src="./images/33-spirit8-digital-agency_03.png" alt=""></a></div>
    <!-- 广告图 -->
    <div id="banner">
        <h3>wELCOME on <span>spirit8</span></h3>
        <h4>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
        </h4>
        <a href="#">
            <img src="images/33-spirit8-digital-agency_03.png" alt="">
        </a>
    </div>
    <!-- about -->
    <div id="about">
        <div class="about-box">
            <div class="left">
                <img src="./images/left.png" alt="">
            </div>
            <div class="right">
                <div class="small-title">
                    About us
                </div>
                <div class="title">Some words <span>about us</span></div>
                <div class="line"></div>
                <div class="content">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </div>
                <ul>
                    <li>
                        <img src="./images/yuan_03.png" alt="">
                        <div><span>Mission -</span> We deliver uniqueness and quality</div>
                    </li>
                    <li>
                        <img src="./images/yuan_03.png" alt="">
                        <div><span>Mission -</span> We deliver uniqueness and quality</div>
                    </li>
                    <li>
                        <img src="./images/yuan_03.png" alt="">
                        <div><span>Mission -</span> We deliver uniqueness and quality</div>
                    </li>

                </ul>

                <div class="about-btn">
                    <img src="./images/suo_03.png" alt="">
                    Browse our work
                </div>
            </div>
        </div>
    </div>
    <!-- team -->
    <div id="team">
        <h3>Meet <span>our team</span></h3>
        <div class="line"></div>
        <div class="line2"></div>

        <!-- 列表 -->
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item wow fadeInLeft" data-wow-delay="500ms">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow fadeInLeft" data-wow-delay="200ms">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow fadeInRight" data-wow-delay="200ms">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item wow fadeInRight" data-wow-delay="500ms">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <img src="images/1.jpg" alt="">
                            <div class="nickname">Jason Statham</div>
                            <div class="lang">Knife designer</div>
                            <div class="content">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

    </div>
    <!-- services -->
    <div id="services">
        <h3>take a look at <span>our services</span></h3>
        <div class="line"></div>
        <div class="line2"></div>
        <div class="jie">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
            Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
            very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
            from a line in section 1.10.32.</div>
        <div class="list">
            <div class="item">
                <img src="images/1.jpg" alt="">
                <div class="nickname">Web design</div>
                <div class="content">
                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
            </div>

            <div class="item">
                <img src="images/1.jpg" alt="">
                <div class="nickname">Web design</div>
                <div class="content">
                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
            </div>

            <div class="item">
                <img src="images/1.jpg" alt="">
                <div class="nickname">Web design</div>
                <div class="content">
                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
            </div>

            <div class="item">
                <img src="images/1.jpg" alt="">
                <div class="nickname">Web design</div>
                <div class="content">
                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
            </div>
        </div>
    </div>
    <!-- clients -->
    <div id="clients">
        <h3>SOME OF <span>OUR CLIENTS</span></h3>
        <div class="line"></div>
        <div class="line2"></div>
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="./images/z1.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z2.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z3.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z4.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z5.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="./images/z1.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z2.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z3.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z4.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z5.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="./images/z1.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z2.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z3.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z4.png" alt="">
                        </div>

                        <div class="item">
                            <img src="./images/z5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- work -->
    <div id="work">
        <h3>take a look at <span>our work</span></h3>
        <div class="line"></div>
        <div class="line2"></div>
        <div class="jie">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
        </div>
        <div class="work-nav">
            <nav class="navbar">
                <div class="container-fluid warp">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <!-- 如果当前是移动端时的导航按钮 -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- logo -->
                        <a class="navbar-brand" href="#">Filter by type</a>
                    </div>
    
                    <!-- 导航条 -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
    
                        <!-- 右边内容 -->
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">All</a></li>
                            <li class="line3"></li>
                            <li><a href="#">Web design</a></li>
                            <li class="line3"></li>
                            <li><a href="#">Mobile design</a></li>
                            <li class="line3"></li>
                            <li><a href="#">Photograpy</a></li>
    
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
        <div class="tu">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/1.jpg" alt="">
        </div>
    </div>
    <!-- testimonials -->
    <div id="testimonials">
        <h3><span></span>our clients’ </span>testimonials</h3>
        <div class="line"></div>
        <div class="line2"></div>
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="z1">
                            This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        </div>
                        <div class="z2">
                            Dean Martin, <span>CEO Acme Inc.</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="z1">
                            This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        </div>
                        <div class="z2">
                            Dean Martin, <span>CEO Acme Inc.</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="z1">
                            This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        </div>
                        <div class="z2">
                            Dean Martin, <span>CEO Acme Inc.</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- contact -->
    <div id="contact">
        <h3>feel free to <span>contact us</span></h3>
        <div class="line"></div>
        <div class="line2"></div>
        <div class="jie">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. 
        </div>
        <div class="content">
            <div class="content-top">
                <div class="a">
                    <div>Name <span>*</span></div>
                    <input type="text" name="" id="">
                </div>
                <div class="a">
                    <div>Email address <span>*</span></div>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="content-message">
                <div>Message <span>*</span></div>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div class="bottom">
                <button>send</button>
            </div>
        </div>
    </div>
    
    <footer id="footer">
        <div class="middle">
            <div class="left">
                ALL RIGHTS RESERVED. COPYRIGHT © 2014&nbsp;<span>SPIRIT8</span>
            </div>
            <div class="right">
                <img src="./images/bottom.png" alt="">
                <img src="./images/bottom.png" alt="">
                <img src="./images/bottom.png" alt="">
                <img src="./images/bottom.png" alt="">
                <img src="./images/bottom.png" alt="">
            </div>
        </div>
    </footer>
</body>

</html>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/wow.min.repeat.js"></script>
<script src="js/less.js"></script>
<script>
    new WOW().init();
    var teamSwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    });
    // 锚点跳转滑动效果 
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function () {
        // location.pathname 返回当前URL的路径名(不包含域名)
        // console.log(location.pathname) 系统的路径
        // console.log(location.pathname.replace(/^\//,''))
        // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径
        // console.log(location.hostname)  //系统获取域名部分
        // console.log(this.hostname)  //当前元素所跳转链接的域名部分

        /* 
            replace(需要搜索字符,替换内容)
        */
        // console.log(this.hostname)

        //判断你跳转的链接 是不是在当前界面
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            //获取将要跳转的锚点位置
            var $target = $(this.hash);
            // 逻辑短路 #about name=about
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

            //一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length) {
                //获取目标元素的位置
                var targetOffset = $target.offset().top + 10;

                //让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }
        }
    });
</script>